<template>
  <div class="page-orderdtl">
    <myHeader head-title="订单详情" goBack="true"></myHeader>
    <div class="letter">
      <li>订 单 号: {{odrId}}</li>
      <li>订单时间: {{odrDt}}</li>
      <li>订单金额: {{odrAmt}}</li>
      <li>其他金额: </li>
      <li>其他金额说明: </li>
      <li>最晚支付时间: </li>
      <li>订单说明: </li>
      <li v-if="odrStatus==='A'">订单状态: 待支付</li>
      <li v-else-if="odrStatus==='S'">订单状态: 已支付</li>
      <li v-else-if="odrStatus==='F'">订单状态: 支付失败</li>
    </div>
    <div class="button big blue" @click="doPay">支付</div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import moment from 'moment'
  import myHeader from '@/components/common/header/header'
  import alertTip from '@/components/common/alertTip'
  import env from '@/config/env'

  export default {
    data() {
      return {
        odrId: null,
        odrDt: null,
        odrAmt: null,
        odrStatus: null
      }
    },
    components:{
      myHeader
    },
    computed: {
      ...mapGetters([
        'storeUserRent'
      ]),
      orderList: function() {
        return this.storeUserRent.orderList === null ? [] : this.storeUserRent.orderList;
      }
    },
    beforeMount() {
      this.initData();
    },
    methods: {
      initData() {
        let index = this.$route.query.index;
        console.log("index:", index);
        if (this.storeUserRent.orderList === null ||
          this.storeUserRent.orderList.length === 0 ||
          this.storeUserRent.orderList.length <= index) {
          console.warn("this.storeUserRent.orderList.length:", this.storeUserRent.orderList.length);
          this.$router.go(-1);
          return;
        }
        let data = this.storeUserRent.orderList[index];
        console.log("data:", data);
        this.odrId = data.odrId;
        this.odrDt = data.odrDt;
        this.odrAmt = data.odrAmt;
        this.odrStatus = data.odrStatus;
      },
      onBridgeReady() {
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest', {
            "appId":"wx2421b1c4370ec43b",     //公众号名称，由商户传入
            "timeStamp":"1395712654",         //时间戳，自1970年以来的秒数
            "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串
            "package":"prepay_id=u802345jgfjsdfgsdg888",
            "signType":"MD5",         //微信签名方式：
            "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名
          },
          function(res){
            if(res.err_msg == "get_brand_wcpay_request:ok" ) {}
            // 使用以上方式判断前端返回,微信团队郑重提示：
            // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
          }
        );
      },
      doPay() {
        if (typeof WeixinJSBridge === "undefined"){
          if (document.addEventListener ){
            document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
          } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
            document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
          }
        } else {
          this.onBridgeReady();
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import 'src/style/mixin';

  .page-orderdtl{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f2f2f2;
    z-index: 202;
    padding-top: 1.95rem;
    p, span {
      font-family: Helvetica Neue,Tahoma,Arial;
    }
  }
  .order_ul{
    @include sc(0.8rem, #999);
    border: 0.2rem solid #f1f1f1;
    padding: 0 0.04rem;
    border-radius: 0.08rem;
    margin-left: 0.05rem;
  }
  .letter{
    padding: 20px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    overflow: hidden;
    position: relative;
    top: 1px;
  }
  .button{
    font:15px Calibri, Arial, sans-serif;
    @include sc(.8rem, #fff);
    background-color: $blue;
    text-align: center;

    width: 100%;

    /* A semi-transparent text shadow */
    text-shadow:1px 1px 0 rgba(255,255,255,0.4);

    /* Overriding the default underline styling of the links */
    text-decoration:none !important;
    white-space:nowrap;

    display:inline-block;
    vertical-align:baseline;
    position:relative;
    cursor:pointer;
    padding:10px 20px;

    background-repeat:no-repeat;

    /* The following two rules are fallbacks, in case
         the browser does not support multiple backgrounds. */

    background-position:bottom left;
    //background-image:url('button_bg.png');

    /* Multiple backgrounds version. The background images
         are defined individually in color classes */

    background-position:bottom left, top right, 0 0, 0 0;
    background-clip:border-box;

    /* Applying a default border raidus of 8px */

    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;

    /* A 1px highlight inside of the button */

    -moz-box-shadow:0 0 1px #fff inset;
    -webkit-box-shadow:0 0 1px #fff inset;
    box-shadow:0 0 1px #fff inset;

    /* Animating the background positions with CSS3 */
    /* Currently works only in Safari/Chrome */

    -webkit-transition:background-position 1s;
    -moz-transition:background-position 1s;
    transition:background-position 1s;
  }

  .button:hover{

    /* The first rule is a fallback, in case the browser
         does not support multiple backgrounds
      */

    background-position:top left;
    background-position:top left, bottom right, 0 0, 0 0;
  }

  .button:active{
    /* Moving the button 1px to the bottom when clicked */
    bottom:-1px;
  }

  /* The three buttons sizes */

  .button.big		{ font-size:20px;}
  .button.medium	{ font-size:18px;}
  .button.small	{ font-size:13px;}

  /* A more rounded button */

  .button.rounded{
    -moz-border-radius:4em;
    -webkit-border-radius:4em;
    border-radius:4em;
  }
</style>
